Customizations
The following section describes which parts of the application can be customized.
Colors of calendar overview
It is possible to define different colors for the leave types (flexi time, annual leave, sickness etc.) To do this you need an additional .css-file, which can be created with any text editor This file must be named: Calendar.custom.css and saved in the folder c:\Program Files\TimePunch\TimePunch Calendar\Content.
You can copy the following css classes to this file:
.FlexiTime {
background: orange;
}
.AnnualLeave {
background: gold;
}
.Sickness {
background: turquoise;
}
.SicknessNotPaid {
background: cadetblue;
}
.IdleTime {
background: plum;
}
.PublicHoliday {
background: hotpink;
}
.Weekend {
background: gainsboro;
}
.Pending {
background: limegreen;
}
.Absent {
background: cornflowerblue;
}
.BusinessTrip {
background: purple;
}
.Cancelled {
background: url("../images/cancelled.png");
}
.Default {
background: \#FFFFFF;
}
.Worktime {
background: \#FFFFFF;
}
.Placeholder{
background: url("../images/placeholder.png");
}
To change a color you have to assign the hex value of the color to the background property of the appropriate .css class.
Example: If you like to change the color for flexi time to black you need to amend the class .FlexiTime like this:
.FlexiTime {
background: \#000000;
}
In the following table you can see which leave type belongs to which .css class:
| Antragstyp | Css-Klasse |
|---|---|
| Flexi time | .FlexiTime |
| Annual leave | .AnnualLeave |
| Sick leave | .Sickness |
| Sick leave (not paid) | .SicknessNotPaid |
| Idle time | .IdleTime |
| Public holiday | .PublicHoliday |
| weekend | .Weekend |
| pending | .Pending |
| absent | .Absent |
| Business trip | .BusinessTrip |
| cancelled | .Cancelled |
If you would like to change the color for working time too, you have to amend the class .WorkTime.
You don’t have to update all .css classes. If you only want to change the color for flex time than you just copy this class to the file Calendar.custom.css.